/*
  1 点击 "+" 触发tap点击事件
    1 调用小程序内置的 选择图片的 api
    2 获取到 图片的路径 数组
    3 把图片路径 存到 data的变量中
    4 页面就可以根据 图片数组 进行循环显示 自定义组件
  2 点击 自定义图片 组件
    1 获取被点击的元素的索引
    2 获取data中的图片数组
    3 根据索引 数组中删除对应的元素
    4 把数组重新设置回data中
  3 点击 "提交"
    1 获取文本域的内容
      1 data中定义变量 表示 输入框内容
      2 文本域 绑定 输入事件 事件触发的时候 把输入框的值 存入到变量中
    2 对这些内容 合法性的验证
    3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片外网的连接
      1 遍历图片数组
      2 挨个上传
      3 自己再来维护图片数组 存放 图片上传后的外网的连接
    4 文本域 和 外网的图片的路径 一起提交到服务器 前端模拟 并不会发送请求到后台
    5 情况当前页面
    6 返回上一页
*/
import { request } from "../../request/index.js"
//这里使用ES7 的async await 需要这个,不能app.js全局使用,必须单独使用
//https://github.com/yangsuai/regeneratorRuntime
import regeneratorRuntime from '../../lib/runtime/runtime.js';

import { showToast} from '../../utils/asyncWx.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        value: '体验问题',
        isActive: true
      },
      {
        id: 1,
        value: '商品、商家投诉',
        isActive: false
      }
    ],

    //被选中图片的数组
    chooseImgs:[],
    //文本域的内容
    textVal:"",
    //禁用上传按钮
    idDisabled:false,
    
  },
  //外网的图片的路径数组
  UpLoadImgs: [],
  

  handletabsItemChange(e) {
    //接受又子组件传递过来的数据 e.detail
    const { index } = e.detail;
    //2 修改原数组
    let { tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({ tabs: tabs })
  },
  // 点击 "+" 选择图片
  handleChooseImg(e){
    // 调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片的数量
      count: 9,
      // 图片的格式 原图 压缩
      sizeType: ['original', 'compressed'],
      //图片的来源  相册 相机
      sourceType: ['album', 'camera'],
      success:(res) =>{
        //计算上传总的图片长度
        let totalLength = this.data.chooseImgs.length + res.tempFilePaths.length;
        //超出5张提示
        if (totalLength>5){
          //计算最多还能选择几张图片
          let number = 5 - this.data.chooseImgs.length;
          //提示用户最多还能选择几张
          showToast({
            title: "您最多还能选择" + number+"张图片"})
          return;
          //正好5张禁用上传按钮
        }else if(totalLength === 5){
          this.setData({idDisabled:true});
        }
        //js解构方式 追加图片
        this.setData({
          chooseImgs: [...this.data.chooseImgs, ...res.tempFilePaths]
        })
        
      }
      
    })
  },
  //点击自定义图片 组件 移除图片
  handleRemoveImg(e){
    //获取被点击的组件索引
    const {index} = e.currentTarget.dataset;
    // 获取data中的图片数组
    let {chooseImgs} = this.data;
    //删除元素
    chooseImgs.splice(index,1);
    //设置回data中
    this.setData({ chooseImgs,idDisabled:false})
  },
  
  //文本域的输入事件
  handleTextInput(e){
    this.setData({textVal:e.detail.value})
  },

  //提交按钮点击事件
  handleForSubmit(e){
    //获取文本域内容  图片数组
    const {textVal,chooseImgs} = this.data;
    //合法性验证
    if(!textVal.trim()){
      //不合法提示
      showToast({title:"请输入内容"});
      return;
    }
    // 准备上传图片到 专门的图片服务器
    // 上传文件的 api 不支持 多个文件同时上传 遍历数组挨个上传
    //显示正在等待的图片
    wx.showLoading({
      title: "正在上传中",
      mask: true
    })

    //判断有没有需要上传的图片数组
    if(chooseImgs.length != 0){
      chooseImgs.forEach((v, i) => {

        wx.uploadFile({
          //图片要上传到哪里
          url: 'https://images.ac.cn/Home/Index/UploadAction/',
          //被上传的文件的路径
          filePath: v,
          //上传的文件名 后台来获取文件
          name: 'file',
          // header: {},
          // 顺带的文本信息
          formData: {},
          success: (res)=> {
            let url = JSON.parse(res.data);
            this.UpLoadImgs.push(url);

            //所有的图片都上传完毕了才出发
            if (i === chooseImgs.length - 1) {
              //隐藏loading窗口
              wx.hideLoading();

              //提交都成功了
              //重置页面
              this.setData({
                textVal: "",
                chooseImgs: []
              })
              //返回上一个页面
              wx.navigateBack({
                delta: 1,
              })
            }
          }
        })
      })
    }else{
      wx.hideLoading();
      console.log('只是提交了文本')
      //返回上一个页面
      wx.navigateBack({
        delta: 1,
      })
    }

  },

})